﻿<script setup lang="ts" name="ContextMenu">
import useScrollPosition from '@/hooks/scrollPosition'
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import { successMessage } from '@/utils/message'
const route = useRoute()

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
// 滚动行为
useScrollPosition(route)

const clickContextMenu = (text) => {
  successMessage(text + '被点击了')
}

const contextMenuData = ref([])

const addContextMenu = (type) => {
  contextMenuData.value.push(type)
}
const removeContextMenu = () => {
  contextMenuData.value.pop()
}
</script>

<template>
  <el-space :size="systemConfig.space" fill alignment="stretch" style="flex-wrap: nowrap">
    <el-row :gutter="systemConfig.space">
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>基础用法</span>
            </div>
          </template>
          <div class="area-click" v-contextmenu:contextmenu>右键点击此区域</div>
          <v-contextmenu ref="contextmenu">
            <v-contextmenu-item class="icon-placeholder" @click="clickContextMenu('默认菜单')">默认菜单</v-contextmenu-item>
            <v-contextmenu-item class="icon-placeholder" @click="clickContextMenu('带图标菜单')">
              <svg-icon icon="ri:add-fill"></svg-icon>
              带图标菜单
            </v-contextmenu-item>
            <v-contextmenu-divider />
            <v-contextmenu-item class="icon-placeholder" disabled @click="clickContextMenu('禁用菜单')">禁用菜单</v-contextmenu-item>
            <v-contextmenu-submenu class="icon-placeholder" title>
              <template #title>
                <svg-icon icon="ri:folder-open-line"></svg-icon>
                多级嵌套菜单
              </template>
              <v-contextmenu-item @click="clickContextMenu('菜单1')">菜单1</v-contextmenu-item>
              <v-contextmenu-submenu title="菜单2">
                <v-contextmenu-item @click="clickContextMenu('菜单2-1')">菜单2-1</v-contextmenu-item>
                <v-contextmenu-item @click="clickContextMenu('菜单2-2')">菜单2-2</v-contextmenu-item>
              </v-contextmenu-submenu>
              <v-contextmenu-item @click="clickContextMenu('菜单3')">菜单3</v-contextmenu-item>
            </v-contextmenu-submenu>
          </v-contextmenu>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>分组用法</span>
            </div>
          </template>
          <div class="area-click" v-contextmenu:contextmenuGroup="{ trigger: ['contextmenu', 'click'] }">右键或左键点击此区域</div>
          <v-contextmenu ref="contextmenuGroup">
            <v-contextmenu-item @click="clickContextMenu('菜单1')">菜单1</v-contextmenu-item>
            <v-contextmenu-divider />
            <v-contextmenu-group class="icon-group" title :maxWidth="240">
              <template #title>分组菜单1</template>
              <v-contextmenu-item @click="clickContextMenu('居中对齐菜单')"><svg-icon icon="ri:align-center"></svg-icon></v-contextmenu-item>
              <v-contextmenu-item @click="clickContextMenu('两端对齐菜单')"><svg-icon icon="ri:align-justify"></svg-icon></v-contextmenu-item>
              <v-contextmenu-item @click="clickContextMenu('左对齐菜单')"><svg-icon icon="ri:align-left"></svg-icon></v-contextmenu-item>
              <v-contextmenu-item @click="clickContextMenu('右对齐菜单')"><svg-icon icon="ri:align-right"></svg-icon></v-contextmenu-item>
            </v-contextmenu-group>
            <v-contextmenu-divider />
            <v-contextmenu-group class="text-group" title :maxWidth="240">
              <template #title>分组菜单2</template>
              <v-contextmenu-item @click="clickContextMenu('菜单5')">菜单5</v-contextmenu-item>
              <v-contextmenu-item @click="clickContextMenu('菜单6')">菜单6</v-contextmenu-item>
              <v-contextmenu-item @click="clickContextMenu('菜单7')">菜单7</v-contextmenu-item>
            </v-contextmenu-group>
            <v-contextmenu-divider />
            <v-contextmenu-submenu class="icon-placeholder" title>
              <template #title>
                <svg-icon icon="ri:folder-open-line"></svg-icon>
                多级嵌套菜单
              </template>
              <v-contextmenu-item @click="clickContextMenu('菜单1')">菜单1</v-contextmenu-item>
              <v-contextmenu-submenu title="菜单2">
                <v-contextmenu-item @click="clickContextMenu('菜单2-1')">菜单2-1</v-contextmenu-item>
                <v-contextmenu-item @click="clickContextMenu('菜单2-2')">菜单2-2</v-contextmenu-item>
              </v-contextmenu-submenu>
              <v-contextmenu-item @click="clickContextMenu('菜单3')">菜单3</v-contextmenu-item>
            </v-contextmenu-submenu>
            <v-contextmenu-divider />
            <v-contextmenu-item @click="clickContextMenu('菜单8')">菜单8</v-contextmenu-item>
          </v-contextmenu>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>动态用法</span>
            </div>
          </template>
          <div class="area-click" v-contextmenu:contextmenuDynamic="{ trigger: ['contextmenu', 'dblclick'] }">右键点击或左键双击此区域</div>
          <v-contextmenu ref="contextmenuDynamic">
            <v-contextmenu-group class="text-group" title :maxWidth="320">
              <template #title>操作</template>
              <v-contextmenu-item :hideOnClick="false" @click="addContextMenu('item')">添加菜单</v-contextmenu-item>
              <v-contextmenu-item :hideOnClick="false" @click="addContextMenu('group')">添加菜单组</v-contextmenu-item>
              <v-contextmenu-item :hideOnClick="false" @click="addContextMenu('submenu')">添加子菜单</v-contextmenu-item>
              <v-contextmenu-item :hideOnClick="false" @click="removeContextMenu()">删除菜单</v-contextmenu-item>
            </v-contextmenu-group>
            <template v-for="(item, index) of contextMenuData" :key="index">
              <v-contextmenu-divider />

              <v-contextmenu-group class="text-group" v-if="item === 'group'" :title="`菜单组 ${index + 1}`" :maxWidth="320">
                <v-contextmenu-item>菜单1</v-contextmenu-item>
                <v-contextmenu-item>菜单2</v-contextmenu-item>
                <v-contextmenu-item>菜单3</v-contextmenu-item>
              </v-contextmenu-group>

              <v-contextmenu-submenu v-else-if="item === 'submenu'" :title="`子菜单 ${index + 1}`">
                <v-contextmenu-item>菜单1</v-contextmenu-item>
                <v-contextmenu-item>菜单2</v-contextmenu-item>
                <v-contextmenu-item>菜单3</v-contextmenu-item>
              </v-contextmenu-submenu>

              <v-contextmenu-item v-else>菜单 {{ index + 1 }}</v-contextmenu-item>
            </template>
          </v-contextmenu>
        </el-card>
      </el-col>
    </el-row>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.el-row {
  flex: 1;

  .el-col {
    display: flex;

    .el-card {
      display: flex;
      flex: 1;
      flex-direction: column;

      :deep(.el-card__body) {
        display: flex;
        flex: 1;

        .area-click {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          background: var(--el-color-primary-light-9);
        }
      }
    }
  }

  .el-col+.el-col {
    .el-card {
      :deep(.el-card__body) {
        .area-click {
          background: var(--el-color-success-light-9);
        }
      }
    }
  }

  .el-col+.el-col+.el-col {
    .el-card {
      :deep(.el-card__body) {
        .area-click {
          background: var(--el-color-danger-light-9);
        }
      }
    }
  }
}

.icon-group,
.text-group {
  :deep(.v-contextmenu-group__menus) {
    display: flex;
    flex-wrap: nowrap;

    .v-contextmenu-item {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      padding: 5px;
    }
  }
}
</style>
